<template>
  <div>
    <a-button v-if="displayType === 'BUTTON'" type="primary" @click="showModal">{{ text }}</a-button>
    <a class="gb-display-block" v-if="displayType === 'LINK'" @click="showModal">{{ text }}</a>
    <a-modal 
      :title="displayType === 'BUTTON'?text :text+ '对照集'"
      centered
      :maskClosable="false"
      :width="1000"
      v-model="visible"
      :footer="null"
    >  
        <a-form layout="inline" class="default-search-form gb-flex-form" :form="form" @submit="handleSearch">
            <a-row :gutter="8" v-if="displayType === 'BUTTON'">
                <a-col :sm="24" :md="12" :lg="8">
                    <a-form-item :colon="false" label="分析编号">
                    <a-input v-decorator="['analysisCode']" placeholder="分析编号"/>
                    </a-form-item>
                </a-col>
                <a-col :sm="24" :md="12" :lg="8">
                    <a-form-item :colon="false" label="样本编号">
                    <a-input v-decorator="['sampleCode']" placeholder="样本编号"/>
                    </a-form-item>
                </a-col>
                <a-col :sm="24" :md="12" :lg="8">
                    <a-form-item class="gb-search-button">
                    <a-button class="item" type="primary" html-type="submit">
                        查询
                    </a-button>
                    </a-form-item>
                </a-col>
            </a-row>
             <a-row :gutter="8" v-else>
                <a-col :sm="24" :md="12" :lg="8">
                    <a-form-item :colon="false" label="对照集名称">
                      <a-input readOnly  placeholder="对照集名称" v-model="this.row.buildingName"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-table :columns="columns"
        :rowKey="record => record.id"
        :dataSource="data"
        :rowSelection="displayType === 'BUTTON'?{selectedRowKeys: selectedRowKeys, onChange: onSelectChange} : null"
        :pagination="pagination"
        :loading="loading"
        size="small"
        >
        </a-table>
    </a-modal>
  </div>
</template>
<script>
import common from '@/global/common.js'
import axios from "axios";
export default {
  props: {
    text: { type: [String] },
    displayType: { type: [String], default: 'BUTTON' },
    callback: { type: [Function] },
    row: { type: [Object], default: () => { return {} } },
    url: { type: [String] },
  },
  data() {
    return {
        form: this.$form.createForm(this, {name: this._uid}),
        visible: false,
        data: [],
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        pagination: {sortField: 'sample_code', sortOrder: 'ascend', ...common.getPagination()},
        buildingName:'',
    }
  },
  methods: {
    showModal() {
      this.form.resetFields();
      this.visible = true
    },
    handleSearch (e) {
      if(e){
        this.pagination.current = 1;
        e.preventDefault();
      }
      this.fetch()
    },
    handleReset () {
      this.form.resetFields();
      this.handleSearch()
    },
    handleActionWidth (data) {
      this.actionWidth = data
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange (pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      this.pagination.sortField = ''
      this.pagination.sortOrder = ''
      if (sorter.column) {
        this.pagination.sortField = sorter.columnKey
        this.pagination.sortOrder = sorter.order
      }
      this.fetch({
        ...filters,
      });
    },
    fetch (param = {}) {
      this.form.validateFields((err, formValue) => {
        let buildingId = this.row.id
        formValue = {...formValue, buildingId}

        if (err) {
          return
        }
        this.loading = true
        axios({
          url: '/backend/building/findBuildingAnalysisList',
          method: 'get',
          params: {
            pageSize: this.pagination.pageSize,
            pageNum: this.pagination.current,
            sortField: this.pagination.sortField,
            sortOrder: this.pagination.sortOrder,
            ...param,
            ...formValue
          },
        }).then((res) => {
          this.pagination.total = res.data.total;
          this.data = res.data.rows;
        }).catch(() => {

        }).finally(() => {
          this.loading = false;
        })
      });
    }
  },
  computed:{
    funcs() {
      return common.getVisibleFunc('BuildingList')
    },
    columns() {
        const columns = [
            { title: "分析编号", dataIndex: 'analysisCode', key: 'analysisCode', width: 180 },
            { title: "样本编号", dataIndex: 'sampleCode', key: 'sampleCode', width: 100 },
            { title: "样本类型", dataIndex: 'sampleTypeDesc', key: 'sampleTypeDesc', width: 100 },
            { title: "性别", dataIndex: 'genderDesc', key: 'genderDesc', width: 100 },
            { title: "质控结果", dataIndex: 'summaryResult', key: 'summaryResult', width: 100 },
        ]
        return columns
    },
  },
  mounted() {
    this.fetch();
  },
}
</script>
<style>
.control-set{
    margin-top:8px ;
}
</style>